<template>
  <div>
    <button @click="show=!show">
      toggle
    </button>
       <p>{{status}}</p>
    <transition
     @before-enter="status='进来中'" 
     @enter="status='进来了'" 
     @after-enter="status='进来后'"
     @enter-cancelled="status='取消进入'"
     @before-leave="status='离开中'"
     @leave="status='离开'"

     name="fade">
      <p v-if="show">this is a fade test</p>  
    </transition>
    <hr>
    <button @click="show2 = !show2" >CSS 过渡</button>
    <transition name="slide-fade" :duration="10000">
      <p v-if="show2">hello</p>

    </transition>
    <hr>
    <button @click="show3 = !show3">CSS  动画,定制时间</button>
    <transition name="bounce" >
      <p v-if="show3">THIS IS A ANIMATE VIEW</p>
    
    </transition>
    <hr>
    <h4>使用Velocity.js的简单例子</h4>
    <div id="example-4">
  <button @click="show4 = !show4">
    Toggle
  </button>
  <transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:leave="leave"
    v-bind:css="false"
  >
    <p v-if="show4">
      Demo
    </p>
  </transition>
</div>
  </div>
</template>

<script>
export default {

  props:{
    'passmsg':String,
    'number-to-do':[Number,String],  //[Number,String,...] 无法传递数字，因为属性传递都是字符串
    'to-val':[Number,String]
  },
  data () {
    return {
      show:true,
      status:'开始之前',
      show2:true,
      show3:true,
      show4:true
    }
  },
  methods:{
    emitMyEvent(){
      this.$emit("my-event",this.msg)
    },
     beforeEnter: function (el) {
      el.style.opacity = 0
      el.style.transformOrigin = 'left'
    },
    enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
      Velocity(el, { fontSize: '1em' }, { complete: done })
    },
    leave: function (el, done) {
      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
      Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
      Velocity(el, {
        rotateZ: '45deg',
        translateY: '30px',
        translateX: '30px',
        opacity: 0
      }, { complete: done })
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
  .fade-enter-active,.fade-leave-active{
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to{
    opacity: 0;
  }

  .slide-fade-enter-active{
    transition: all .3s ease;
  }
  .slide-fade-leave-active{
    transition: all .8s cubic-bezier(1.0,0.5,0.8,1.0);
  }
  .slide-fade-enter,.slide-fade-leave-to{
    transform: translateX(10px);
    opacity: 0;
  }

  .bounce-enter-active{
    animation:bounce-in .5s;
  }
  .bounce-leave-active{
    animation:bounce-in .5s reverse;
  }
  @keyframes bounce-in {
     0%{
       transform: scale(0);
     }
     50%{
       transform: scale(1.5);
     }
     100%{
       transform: scale(1);
     }
  }
</style>
